import QtQuick 2.11
import QtWebView 1.1
import QtGamepad 1.0
Rectangle {
    id:windows
    property real leftPointx: 0
    property real leftPointy: windows.height/2
    property real rightPointx: 0
    property real rightPointy: windows.height/2
    property int leftPercent: 0
    property int rightPercent: 0


    property bool pointReverse: false

    property string leftWheelBlockColor: "red"
    property string rightWheelBlockColor: "red"
    property int minPointy: leftWheel.y+leftWheel.border.width+leftWheelBlock.height/2
    property int maxPointy: leftWheel.y+leftWheel.height-(leftWheel.border.width+leftWheelBlock.height/2)
    property int midPointy: windows.minPointy+(windows.maxPointy-windows.minPointy)/2
    property int minleftx: leftWheel.x+leftWheel.border.width
    property int maxleftx: leftWheel.x+leftWheel.width-leftWheel.border.width
    property int minrightx: rightWheel.x+rightWheel.border.width
    property int maxrightx: rightWheel.x+rightWheel.width-rightWheel.border.width
    rotation: 0
    scale: 1

    function getPercent(){
        leftPercent=(midPointy-leftPointy)/((maxPointy-minPointy)/2-1)*100;
        rightPercent=(midPointy-rightPointy)/((maxPointy-minPointy)/2-1)*100;
        console.log("leftPercent:",leftPercent,"    rightPercent:",rightPercent);

        if((leftPercent<=10)&&(leftPercent>=-10))
        {
            leftWheelBlockColor="red";
        }
        else leftWheelBlockColor="green";

        if((rightPercent<=10)&&(rightPercent>=-10))
        {
            rightWheelBlockColor="red";
        }
        else rightWheelBlockColor="green";
    }


    MultiPointTouchArea{
         anchors.fill: windows
         touchPoints: [
             TouchPoint{id:pointLeft},
             TouchPoint{id:pointRight}
         ]
         minimumTouchPoints: 1
         maximumTouchPoints: 2
         function getTouchPoint(){
             if((pointLeft.x<maxleftx)&&(pointLeft.x>minleftx))
             {
                if(pointLeft.y>maxPointy)leftPointy=maxPointy;
                else if(pointLeft.y<minPointy)leftPointy=minPointy;
                else leftPointy=pointLeft.y;
             }
             else if((pointLeft.x<maxrightx)&&(pointLeft.x>minrightx))
             {
                 if(pointLeft.y>maxPointy)rightPointy=maxPointy;
                 else if(pointLeft.y<minPointy)rightPointy=minPointy;
                 else rightPointy=pointLeft.y;
             }

             if((pointRight.x<maxleftx)&&(pointRight.x>minleftx))
             {
                if(pointRight.y>maxPointy)leftPointy=maxPointy;
                else if(pointRight.y<minPointy)leftPointy=minPointy;
                else leftPointy=pointRight.y;
             }
             else if((pointRight.x<maxrightx)&&(pointRight.x>minrightx))
             {
                 if(pointRight.y>maxPointy)rightPointy=maxPointy;
                 else if(pointRight.y<minPointy)rightPointy=minPointy;
                 else rightPointy=pointRight.y;
             }
             windows.getPercent();
         }
         onPressed: {
             getTouchPoint();
         }
         onUpdated: {
             getTouchPoint();
         }
     }
    MouseArea{
        id:mousePoint
        anchors.fill: windows
        hoverEnabled: true

        function getMousePoint(){
            if((mouseX <maxleftx)  && (mouseX>minleftx))
            {
                if(mouseY>maxPointy)
                {
                    leftPointy=maxPointy;
                }
                else if(mouseY<minPointy)
                {
                    leftPointy=minPointy;
                }
                else
                {
                    leftPointy=mouseY;
                }
                pointReverse=false;
                console.log("On leftWheel");
            }
            else if((mouseX<maxrightx)  && (mouseX>minrightx))
            {
                if(mouseY>maxPointy)
                {
                    rightPointy=maxPointy;
                }
                else if(mouseY<minPointy)
                {
                    rightPointy=minPointy;
                }
                else
                {
                    rightPointy=mouseY;
                }
                console.log("On RightWheel");
                pointReverse=true;
            }
            else
            {
                pointReverse=false;
            }
            windows.getPercent();
        }

        onPressed: {
            getMousePoint();
        }
        onPositionChanged: {
            getMousePoint();
        }
    }
    Rectangle{
        id:leftWheel
        x:0
        width: windows.width*0.2
        height: windows.height
        color: "gray"
        border.color: "black"
        border.width: 5
        radius: 5


        Rectangle{
            id:leftWheelBlock
            x:leftWheel.border.width
            y:leftPointy-this.height/2
            width: leftWheel.width-this.x*2
            height: (leftWheel.height-this.x*2)*0.2
            color: leftWheelBlockColor
            radius: 5
        }
    }

    Rectangle{
        id:rightWheel
        x: leftWheel.width+viewRect.width
        width: windows.width*0.2
        height: windows.height
        color: "gray"
        border.color: "black"
        border.width: 5
        radius: 5

        Rectangle{
            id:rightWheelBlock
            x:leftWheel.border.width
            y:rightPointy-this.height/2
            width: leftWheel.width-this.x*2
            height: (leftWheel.height-this.x*2)*0.2
            color: rightWheelBlockColor
            radius: 5
        }
    }

    Rectangle{
        id:viewRect
        x:leftWheel.width
        width: windows.width*0.6
        height: windows.height
        color: "gray"
        border.color: "black"
        border.width: 5
        radius: 5

        //rotation: 90
        WebView {
            id: webVedio
            x:leftWheel.width
            anchors.fill: viewRect
            url: "http://192.168.4.1"

            MouseArea{
                anchors.fill: webVedio
                onDoubleClicked: {
                    webVedio.reload()
                }
            }
        }
    }
}



















/*##^## Designer {
    D{i:0;autoSize:true;height:480;width:640}D{i:9;anchors_height:480;anchors_width:384;anchors_x:128}
D{i:10;anchors_x:0}
}
 ##^##*/
